<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,maximum-scale=1,minimum-scale=1,initial-scale=1,user-scalable=no">
    <title>发票</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        body,html{
            font-size: 14px;
            font-family: "微软雅黑";
            color:rgba(70,70,70,1);
        }
        button{
            outline: none;
            background: none;
            border:none;
        }
        i{
            font-style: normal;
        }
        .head{
            font-size: 16px;
            display: flex;
            display: -webkit-flex;
            justify-content: space-between;
            padding:10px;
            align-items: center;
            background: #FAFAFA;
        }
        .head button{
            font-size: 16px;
        }
        .head img{
            width:15px;
        }
        .type{
            border-bottom:#EFEFEF;
            padding:18px 0;
            border-bottom:1px solid #EFEFEF;
            margin-left:10px;
        }
        .type i{
            color:rgba(143,143,143,1);
            display: inline-block;
            margin-right:6px;
        }
        .type:after{
            content: '';
            position: absolute;
            right: 10px;
            width: 12px;
            height: 18px;
            background: url(right.png) center center no-repeat;
            background-size: 100% 100%;
        }
        .description{
            color:rgba(143,143,143,1);
            font-size: 12px;
            padding:10px;
            display: inline-block;
        }
        .fp_head{
            font-size: 16px;
        }
        .fp_head>div i{
            display: inline-block;
            margin-right:5px;
            color:rgba(218,78,79,1);
        }
        .fp_title{
            display: flex;
            display: -webkit-flex;
            align-items:center;
            height:30px;
            padding:10px ;
        }
        .fp_g span{
            margin-right:6px;
            display: inline-block;
            height:18px;
            width:18px;
            background:url(ico_20.png) center center no-repeat;
            background-size: 100%;
        }
        .fp_g span.active{
            background:url(ico_21.png) center center no-repeat;
            background-size: 100%;
        }
        .fp_g{
            height:20px;
            display: flex;
            display: -webkit-flex;
            align-items:center;
            padding-left:10px;
            padding-bottom:10px;
        }
        .name{
            width:90%;
            margin:10px auto;
            font-size: 16px;
            background:#F4F4F4;
            padding:10px;
            border-radius: 4px;
        }
        .name input{
            border:none;
            background:none ;
            width:80%;
            font-size: 14px;
            outline: none;
        }
        .name span{
            display: inline-block;
            height:16px;
            width:8px;
            color:rgba(218,78,79,1);
        }
        .item{
            padding:10px;
            border-bottom:1px solid #EFEFEF;
        }
        .line{
            border-top:10px solid #EFEFEF;
        }
        .mail{
            padding:10px;
            font-size: 16px;
        }
        .mail input{
            border:none;
            outline: none;
        }
        .tips{
            font-size: 12px;
            color:rgba(218,78,79,1);
            padding:10px;
        }
        .know{
            font-size:16px;
            color:rgba(143,143,143,1);
            padding-left:10px;
        }
        .prom{
            display: block;
            margin:40px auto;
            width:50%;
            border:1px solid #464646;
            border-radius: 4px;
            font-size: 16px;
            color: rgba(70,70,70,1);
            text-align: center;
            line-height: 50px;
        }
        .person_out{
            padding: 10px;
            border-bottom: 1px solid #EFEFEF;
        }
        .conpany_out{
            display: none;
        }
        .fp_totall{
            position: fixed;
            bottom:-100px;
            width:100%;
            background-color:white;
            text-align: center;
            color:rgba(70,70,70,1);
            display: inline-block;
            transition: bottom 0.5s;
            -moz-transition: bottom 0.5s;
            -webkit-transition: bottom 0.5s;
            -o-transition: bottom 0.5s;
            z-index: 20;
        }
        .fp_totall button{
            display: block;
            text-align:center;
            width:100%;
            line-height: 50px;
            height:50px;
        }
        .back{
            background: rgba(0,0,0,0.3);
            width:100%;
            height:100%;
            position: fixed;
            top:0;
            display: none;
        }
    </style>
    <script src="jquery.min.js"></script>
</head>
<body>
    <div class="back"></div>
    <div class="head">
        <a href="#"><img src="left.png" alt=""></a>
        <span>发票信息</span>
        <button>保存</button>
    </div>
    <div class="content">
        <div class="type">
            <i>发票类型</i>
            <span class="select">电子普通发票</span>
        </div>
        <i class="description">
            电子普通发票是税局认可的有效凭证，具有法律效力，基本用途及使用规定同纸质发票电子普通发票是税局             认可的有效凭证，具有法律效力，基本用途及使用规定同纸质发票
        </i>
        <div class="line"></div>
        <div class="fp_head">
            <div class="fp_title"><i>*</i>发票抬头</div>
        </div>
        <div class="fp_g">
            <span class="active"></span>个人&nbsp;&nbsp;&nbsp;
            <span></span>单位
        </div>
        <div class="conpany_out">
            <div class="name">
                <span></span>
                <input type="text" placeholder="请输入单位名称">
            </div>
            <div class="name">
                <span>*</span>
                <input type="text" placeholder="请在此填写纳税人识别号">
            </div>
        </div>

        <div class="line"></div>
        <div class="person_out">个人</div>
        <div class="item">办公用品</div>
        <div class="item">34343.90元</div>
        <div class="mail">
            发票邮箱
            <input type="text" placeholder="(用于接受电子发票)">
        </div>
        <div class="tips">
            由于目前公司原因，发票将于2018年1月1日后工作日开取，尽请谅解。<br> 如有疑问请联系客服：400-892-9222
        </div>
        <span class="know">发票须知：</span>
        <button class="prom">常见问题</button>
    </div>
    <div class="fp_totall">
        <button>电子普通发票</button>
        <button>纸质普通发票</button>
    </div>
</body>
<script>
    $(function() {
        $(".fp_g span").each(function(index,dom) {
            $(this).on("click",function() {
                $(".fp_g span").eq(index).addClass("active").siblings().removeClass("active");
                if(index==0){
                    $(".conpany_out").hide();
                    $(".person_out").show();
                }else if(index==1){
                    $(".conpany_out").show();
                    $(".person_out").hide();
                }
            })
        })
        $(".type").on("click",function() {
            $(".fp_totall").css("bottom","0");
            $(".back").show();
        })
        $(".fp_totall button").each(function(index,dom) {
            $(this).on("click",function() {
                var cont=$(this).text();
                $(".select").text(cont);
                $(".back").hide();
                $(".fp_totall").css("bottom","-100px");
            })
        })
        $(".back").on("click",function() {
            $(".back").hide();
            $(".fp_totall").css("bottom","-100px");
        })
    })
</script>
</html>